<template>
	<view>
		<u-popup :show="show" mode="bottom" round="48rpx" @close="handleClose">
			<view class="popup-reserve">
				<view class="popup-reserve-header">
					<view style="width: 180rpx;color: #808690;font-size: 32rpx;text-align: left;" @click="handleCancel">取消</view>
					<view style="font-size: 30rpx;color:#232426;font-weight: 600;text-align: center;">檢舉對方?</view>
					<view style="width: 180rpx;color: #27C5D6;font-size: 32rpx;text-align: right;" @click="handleSubmit">送出</view>
				</view>
				<view class="popup-reserve-body">
					<view style="color: #FF3D43;font-size:24rpx;width:100%;text-align: center;">檢舉後您將無法再與對方聯繫，請選擇檢舉原因：</view>
					<view style="margin-top: 32rpx;">
						<view v-for="(item,index) in reportList" :key="index">
							<view @click="setReport(item.id)" style="display: flex;justify-content: flex-start;padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;margin-bottom: 32rpx;">
								<view>
									<u-image
										v-if="item.id == reportId"
										src="/static/images/icon/success-solid.png"
										width="48rpx"
										height="48rpx"
									></u-image>
									<view v-else style="border-radius: 50%;width: 48rpx;height: 48rpx;background-color: #E5E6E8;"></view>
								</view>
								<view style="margin-left: 32rpx;">{{item.title}}</view>
							</view>
						</view>
						<view v-if="reportId==4" style="padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;display: flex;justify-content: flex-start;align-items: center;">
							<u-input name="title" placeholder="請說明原因" v-model="reportTitle" border="none" maxlength="20" @change="handleInput"></u-input>
							<view style="color:#BEC0C5;font-size: 20rpx;display: flex;justify-content: flex-end;">
								{{reportFontNum}} / 100
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"ReportPopup",
		props: {
		    // 控制顯示隱藏
			show: {
			  type: Boolean,
			  default: false
			},
			// 自定義檢舉選項
			reportOptions: {
			  type: Array,
			  default: () => []
			},
			// 被檢舉對象的ID
			targetId: {
			  type: [String, Number],
			  default: ''
			},
			// 被檢舉對象類型
			targetType: {
			  type: String,
			  default: 'user'
			},
			// API 提交函數（可選，如果傳入則使用自定義提交方法）
			submitApi: {
			  type: Function,
			  default: null
			}
		  },
		data() {
			return {
				reportId: null,
				reportTitle: '',
				reportFontNum: 0,
				// 默認檢舉選項
				defaultReportList: [
					{ id: 1, title: '惡意騷擾或冒犯言論' },
					{ id: 2, title: '詐騙、虛假資訊或不當交易行為' },
					{ id: 3, title: '不雅或違反平台規範的內容' },
				    { id: 4, title: '其他違規內容' }
				]
			};
		},
		computed: {
		    // 合併默認選項和自定義選項
		    reportList() {
				return this.reportOptions.length > 0 ? this.reportOptions : this.defaultReportList
		    }
		},
		watch: {
		    show(newVal) {
				if (!newVal) {
					this.resetForm()
				}
			}
		},
		methods:{
			// 設置檢舉原因
			setReport(id) {
				this.reportId = id
				if (id !== 4) {
					this.reportTitle = ''
					this.reportFontNum = 0
				}
			},
			
			// 輸入處理
			handleInput(value) {
				this.reportFontNum = value ? value.length : 0
			},
			
			// 取消檢舉
			handleCancel() {
				console.log('sss')
				this.$emit('close') // 發送 close 事件
				this.resetForm()
			},
			
			// 關閉彈窗
			handleClose() {
				this.$emit('close') // 發送 close 事件
				this.resetForm()
			},
			
			// 提交檢舉
			handleSubmit() {
				if (!this.reportId) {
					uni.showToast({
					title: '請選擇檢舉原因',
					icon: 'none'
					})
					return
				}
			  
				if (this.reportId === 4 && !this.reportTitle.trim()) {
					uni.showToast({
						title: '請填寫檢舉原因',
						icon: 'none'
					})
					return
				}
			  
				const reportData = {
					targetId: this.targetId,
					targetType: this.targetType,
					reportId: this.reportId,
					reportTitle: this.reportId === 4 ? this.reportTitle : this.getReportTitleById(this.reportId),
					customReason: this.reportId === 4 ? this.reportTitle : ''
				}
				
				try {
					// 顯示加載中
					uni.showLoading({
						title: '提交中...'
					})
					
					// 如果有傳入自定義提交方法，使用自定義方法
					if (this.submitApi && typeof this.submitApi === 'function') {
						this.submitApi(reportData)
					} else {
						// 否則使用默認的提交方法
						this.defaultSubmit(reportData)
					}
					
					// 提交成功
					uni.hideLoading()
					uni.showToast({
						title: '檢舉成功',
						icon: 'none'
					})
					
					// 關閉彈窗
					this.$emit('close') // 發送 close 事件
					this.resetForm()
					
				} catch (error) {
					// 提交失敗
					uni.hideLoading()
					uni.showToast({
						title: '檢舉失敗，請稍後再試',
						icon: 'none'
					})
					console.error('檢舉提交失敗:', error)
				}
			},
			
			// 默認提交方法
			defaultSubmit(reportData) {
				// 這裡實現默認的 API 調用
				// 您可以根據實際的 API 接口進行修改
				return new Promise((resolve, reject) => {
					// 模擬 API 調用
					setTimeout(() => {
						// 這裡應該是實際的 API 請求
						// uni.request({ ... })
						console.log('提交檢舉數據:', reportData)
						resolve()
					}, 1000)
				})
			},
			
			// 根據ID獲取檢舉標題
			getReportTitleById(id) {
				const item = this.reportList.find(item => item.id === id)
				return item ? item.title : ''
			},
			
			// 重置表單
			resetForm() {
				this.reportId = null
				this.reportTitle = ''
				this.reportFontNum = 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-reserve{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-reserve-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				width: 180rpx;
			}
			.title{
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				display: flex;
				justify-content: flex-end;
			}
		}
		.popup-reserve-body{
			margin-top: 40rpx;
			
			.week-item{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: rgba(190, 192, 197, 0.50);
			}
			.week-item-active{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: #020202;
				border-bottom: 2rpx solid #020202;
			}
			.line{
				width: 100%;
				height: 1rpx;
				background-color: #F6F8FA;
				
			}
			.card{
				padding: 40rpx 32rpx 0;
				box-sizing: border-box;
			}
			.card-item{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #F6F8FA;
				color: #6A707C;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-item-active{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #27C5D6;
				color: #fff;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-footer{
				padding: 48rpx 32rpx 32rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.card-footer-info{
				margin-left: 16rpx;
				color: #232426;
				font-size: 24rpx;
				line-height: 140%;
				letter-spacing: 0.24px;
			}
			.card-footer-radio{
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				background-color: #E5E6E8;
			}
			
			.popup-reserve-footer{
				width: 100%;
				margin-top: 48rpx;
				display: flex;
				justify-content: center;
				
				.popup-reserve-footer-tips{
					display: flex;
					justify-content: center;
					margin: 0 4rpx;
					align-items: center;
				}
				
				.popup-reserve-bag-title{
					color:#232426;
					font-size: 24rpx;
					line-height: 140%;
					letter-spacing: 0.48rpx;
				}
				
				.popup-reserve-bag{
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
				.unactive{
					background-color: #E5E6E8;
				}
				.active{
					background-color: #27C5D6;
				}
			}
		}
	}
</style>